<template>
  <div class="min-h-screen bg-gray-100">
    <div class="max-w-7xl mx-auto p-8">
      <div class="bg-white rounded-2xl shadow-lg flex">
        <!-- 左侧个人信息 -->
        <div class="flex-1 p-10 border-r border-gray-200">
          <div class="space-y-8">
            <!-- 头像 -->
            <div class="flex justify-center">
              <img 
                :src="profileForm.avatar" 
                class="w-32 h-32 rounded-full object-cover border-4 border-blue-100"
              />
            </div>

            <!-- 信息展示 -->
            <div class="space-y-6">
              <div class="space-y-4">
                <div class="flex items-center">
                  <span class="w-24 text-gray-500">姓名：</span>
                  <span class="text-lg font-semibold">{{ profileForm.userName }}</span>
                </div>
                <div class="flex items-center">
                  <span class="w-24 text-gray-500">职位：</span>
                  <span class="text-lg">{{ profileForm.position }}</span>
                </div>
                <div class="flex items-center">
                  <span class="w-24 text-gray-500">公司：</span>
                  <span class="text-lg">{{ profileForm.company }}</span>
                </div>
                <div class="flex items-center">
                  <span class="w-24 text-gray-500">电话：</span>
                  <span class="text-lg">{{ profileForm.phone }}</span>
                </div>
                <div class="flex items-center">
                  <span class="w-24 text-gray-500">邮箱：</span>
                  <span class="text-lg">{{ profileForm.email }}</span>
                </div>
              </div>

              <!-- 修改按钮 -->
              <el-button 
                type="primary" 
                class="w-full !h-12 !rounded-lg !text-lg"
                @click="openEditDialog"
              >
                修改信息
              </el-button>
            </div>
          </div>
        </div>

        <!-- 右侧办公图片 -->
        <div class="w-[600px]">
          <img
            src="https://ai-public.mastergo.com/ai/img_res/3666e153f59c88b1345871e21b56763e.jpg"
            class="w-full h-full object-cover rounded-r-2xl"
          />
        </div>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog
      v-model="editDialogVisible"
      title="编辑个人信息"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="editForm" label-width="80px">
        <!-- 头像上传 -->
        <el-form-item label="头像">
          <div class="flex items-center gap-4">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :auto-upload="false"
              @change="handleAvatarChange"
            >
              <img 
                :src="editForm.avatar" 
                class="w-20 h-20 rounded-full object-cover border-2 border-dashed border-gray-200"
              />
            </el-upload>
            <el-button type="text" @click="triggerUpload">更换头像</el-button>
          </div>
        </el-form-item>

        <!-- 表单字段 -->
        <el-form-item label="姓名" required>
          <el-input 
            v-model="editForm.userName" 
            placeholder="请输入姓名"
            class="!w-64"
          />
        </el-form-item>
        <el-form-item label="职位">
          <el-input 
            v-model="editForm.position" 
            placeholder="请输入职位"
          />
        </el-form-item>
        <el-form-item label="公司">
          <el-input 
            v-model="editForm.company" 
            placeholder="请输入公司名称"
          />
        </el-form-item>
        <el-form-item label="电话" required>
          <el-input 
            v-model="editForm.phone" 
            placeholder="请输入联系电话"
            :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]"
          />
        </el-form-item>
        <el-form-item label="邮箱" required>
  <el-input 
    v-model="editForm.email" 
    placeholder="请输入您的邮箱"
    :rules="[
      { required: true, message: '邮箱不能为空' },
      { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '邮箱格式不正确' }
    ]"
  />
</el-form-item>
      </el-form>

      <template #footer>
        <div class="flex justify-end gap-4 pt-6">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 从本地存储加载数据
const loadProfile = () => {
  const saved = localStorage.getItem('userProfile')
  return saved ? JSON.parse(saved) : {
    userName: '张三',
    position: '技术总监',
    company: '未来科技',
    phone: '13800138000',
    avatar: 'https://ai-public.mastergo.com/ai/img_res/f181576e695dad80f53211028b3b7813.jpg'
  }
}

// 响应式数据
const profileForm = ref(loadProfile())
const editDialogVisible = ref(false)
const editForm = ref({ ...profileForm.value })

// 组件挂载时同步数据
onMounted(() => {
  const savedData = localStorage.getItem('userProfile')
  if (savedData) {
    profileForm.value = JSON.parse(savedData)
  }
})

// 打开编辑弹窗
const openEditDialog = () => {
  editForm.value = { ...profileForm.value }
  editDialogVisible.value = true
}

// 头像上传处理
const handleAvatarChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    editForm.value.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

const triggerUpload = () => {
  document.querySelector('.avatar-uploader input').click()
}

const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/')
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }
  return true
}

// 保存数据
const handleSave = async () => {
  try {
    // 表单验证
    if (!editForm.value.userName.trim()) {
      return ElMessage.warning('请输入姓名')
    }
    if (!/^1[3-9]\d{9}$/.test(editForm.value.phone)) {
      return ElMessage.warning('请输入有效的手机号')
    }
    // 添加邮箱验证
    if (!editForm.value.email) {
      return ElMessage.warning('邮箱不能为空')
    }
    if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(editForm.value.email)) {
      return ElMessage.warning('请输入有效的邮箱地址')
    }

    // 更新数据并保存到本地存储
    profileForm.value = { ...editForm.value }
    localStorage.setItem('userProfile', JSON.stringify(profileForm.value))
    
    editDialogVisible.value = false
    ElMessage.success('信息更新成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
    console.error(error)
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  cursor: pointer;
  transition: all 0.3s;
}

.avatar-uploader .el-upload:hover {
  opacity: 0.9;
}

.el-dialog__header {
  border-bottom: 1px solid #f3f4f6;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.el-dialog__title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
}

.el-form-item__label {
  color: #4b5563;
}
</style>